<template>
  <div class="history-record-wrapper">
    <!-- <BarHeader :title="state.headerTitle" /> -->
    <div class="tabs">
      <van-tabs v-model:active="state.active" sticky>
        <van-tab title="日">
          <template v-if="state.active == 0">
            <HistoryDay />
          </template>
        </van-tab>
        <van-tab title="周">
          <template v-if="state.active == 1">
            <HistoryWeek />
          </template>
        </van-tab>
        <van-tab title="月">
          <template v-if="state.active == 2">
            <HistoryMonth />
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, watch } from 'vue'

import HistoryDay from './modules/HistoryDay.vue'
import HistoryWeek from './modules/HistoryWeek.vue'
import HistoryMonth from './modules/HistoryMonth.vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const state = reactive({
  headerTitle: '历史记录',
  active: 0
})

onMounted(() => {
  console.log(window.WebViewJavascriptBridge, '历史记录 桥数据')
  if (window.WebViewJavascriptBridge) {
    window.WebViewJavascriptBridge.callHandler(
      'setToolbarTitle',
      '历史记录',
      null
    )
  }
})
watch(
  () => route.path,
  (to, from) => {
    console.log(window.WebViewJavascriptBridge, '历史记录 桥数据22')
    if (window.WebViewJavascriptBridge) {
      window.WebViewJavascriptBridge.callHandler(
        'setToolbarTitle',
        '历史记录',
        null
      )
    }
  }
)
</script>

<style lang="less" scoped>
@import url(./style/index.less);
</style>
